<template>
	<view class="container">
		<view class="top-box">
			<view class="top">
				<span class="left">到账银行卡</span>
				<span class="right">6256082759873258476</span>
			</view>
			<view class="bottom">定西农业银行临洮县支行</view>
		</view>
		<view class="bottom-box">
			<view class="sub_tips">
				提现金额
			</view>
			<view class="input-box">
				<span class="money-tips">￥</span>
				<input type="number" v-model="price" class="moner-input" :focus="focus">
			</view>
			<view class="sub-money">
				当前零钱余额￥2529，<span>全部提现</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				focus: false,
				price: ''
			}
		},
		onShow() {
			this.focus = true
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		height: 100vh;
		background-color: #F4F5F9;
		.top-box{
			padding:60upx 30upx 30upx;
			.top{
				display: flex;
				align-items: center;
				.left{
					display: inline-block;
					width: 180upx;
					font-size: 26upx;
					color: #333333;
				}
				.right{
					font-size: 32upx;
					color: #333333;
				}
			}
			.bottom{
				font-size: 24upx;
				color: #666666;
				margin-left: 180upx;
				margin-top: 8upx;
			}
		}
		.bottom-box{
			height: calc(100% - 172upx);
			background-color: #fff;
			border-radius: 32px 32px 0px 0px;
			padding: 30upx;
			.sub_tips{
				font-size: 24upx;
				font-weight: 500;
				margin-top: 40upx;
			}
			.input-box{
				margin-top: 40upx;
				display: flex;
				align-items: center;
				border-bottom: 2upx solid #F4F5F9;
				padding-bottom: 30upx;
				.money-tips{
					font-size: 72upx;
					font-weight: bold;
				}
				.moner-input{
					font-size: 72upx;
					font-weight: bold;
					height: 80upx;
				}
			}
			.sub-money{
				margin-top: 30upx;
				font-size: 24upx;
				color: #666666;
				span{
					color: #C79355;
				}
			}
		}
	}
</style>